<template>
	<view class="content">
		<view class="box-introduce">
			<view class="box-introduce-list">
				<view class="orderintroduce">
					<u-icon name="map-fill" color="#ec6531" size="50"></u-icon>
					<view class="orderPathAttraction" v-if="pathAttractionList">
						<text v-for="(item,index) in pathAttractionList" :key="index">
							<!-- {{item.sort == index+1 ? item.attractionName :item.attractionName + '--' }} -->
							{{pathAttractionList.length == index+1 ? item.attractionName+  '-'  + (list.days + "天"): item.attractionName +  '-' }}
						</text>
					</view>
				</view>
				<view class="detail-intro-wrap">
					<view class="detail-intro-top">
						<view class="detail-intro-item">
							<uni-icons type="camera" size="25" color="#f55c21"></uni-icons>
							<view v-if="list.needCameraman == 0">
								{{list.cameramanSex =='male_photography' ? '男' : '女' }}{{list.cameramanType =="ordinary_photographer" ?'高级' :'普通' }}摄影师
							</view>
							<view v-if="list.needCameraman == 1">
								不包含摄影师
							</view>
						</view>
						<view class="detail-intro-item">
							<uni-icons type="image" size="25" color="#f55c21"></uni-icons>

							<view>
								精修{{list.truingNumber}}张简修{{list.simpleModifyNumber}}张
							</view>
						</view>
					</view>
					<view class="detail-intro-bottom">
						<view class="detail-intro-item">
							<uni-icons type="calendar-filled" size="25" color="#f55c21"></uni-icons>
							<view>
								{{list.containTickets==0 ?'包含门票':'不包含门票'}}
							</view>
						</view>
						<view class="detail-intro-item">
							<uni-icons type="home-filled" size="25" color="#f55c21"></uni-icons>
							<view>
								{{list.containStay==0 ?'包含住宿':'不包含住宿'}}
							</view>
						</view>
						<view class="detail-intro-item">
							<uni-icons type="person-filled" size="25" color="#f55c21"></uni-icons>
							<view>
								{{list.peopleNumber ? list.peopleNumber : 1 }}人套餐
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="box-scenic">
			<view class="top-scenic" v-for="(item,index) in pathAttractionList" :key="index">
				<view class="scenic-title">
					第{{index+1}}个景点：{{item.attractionName}}
				</view>
				<view class="scenic">
					<u-swiper :list="item.images" height="400rpx" previousMargin="0" nextMargin="0" circular
						:autoplay="true" radius="5" bgColor="#ffffff" :indicator="true">
					</u-swiper>
				</view>
			</view>
		</view>

		<view class="time">
			<view class="time-list">
				<view v-if="!startDateTime">
					<u-icon name="calendar" color="#f55c21" size="75"></u-icon>
					<view @click="showcalendar = true">选择开始游玩时间和结束游玩时间</view>
				</view>
				<view v-if="startDateTime" @tap="showPicker" @click="showcalendar = true">
					<u-icon name="calendar" color="#f55c21" size="75"></u-icon>
					<view class="time-display">
						<text>{{ startDateTime }} 到 {{ endDateTime }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="addphoto" @click="getaddphoto()">
			<image src="../../static/images/index/xj.png"></image>
			<view class="">
				<text class="onetext">+</text>
				<text class="twotext">跟拍加油包</text>
			</view>
		</view>

		<!-- <u-popup :show="photoshow" @close="close" mode="top" @open="open">
			<view class="u-popup">
				<view class="box-photo">
					<view class="photographer">
						<view class="gender-label">精修</view>
						<view class="needphotographer">
							<view class="u-slider">
								<text @click="minus()">-</text>
								<view style="width: 350rpx;">
									<u-slider v-model="from.extra_truing_number" activeColor="#3c9cff"
										inactiveColor="#3c9cff" block-width="40"></u-slider>
								</view>
								<text @click="add()">+</text>
							</view>
							<text>{{from.extra_truing_number}}张</text>
						</view>
					</view>

					<view class="photographer">
						<view class="gender-label">简修</view>
						<view class="needphotographer">
							<view class="u-slider">
								<text @click="minuspeople()">-</text>
								<view style="width: 350rpx;">
									<u-slider v-model="from.extra_simple_modify_number" activeColor="#3c9cff"
										inactiveColor="#3c9cff" block-width="40"></u-slider>
								</view>
								<text @click="addpeople()">+</text>
							</view>
							<text>{{from.extra_simple_modify_number}}张</text>
						</view>
					</view>
				</view>
				<view class="button">
					<button @click="getminus">取消</button>
					<button @click="getdownload">确定</button>
				</view>
			</view>
		</u-popup> -->

		<u-picker :show="show" :columns="columns" itemHeight="60" @confirm="confirmpicker" @cancel="cancel"
			:closeOnClickOverlay="true"></u-picker>
		<u-picker :show="show1" :columns="columns1" itemHeight="60" @confirm="confirmpicker1" @cancel="cancel1"
			:closeOnClickOverlay="true"></u-picker>
		<u-popup :show="photoshow" @close="close" mode="top" @open="open">
			<view class="u-popup">
				<view class="jingxiu">
					<text class="jingxiu-title">
						精修
					</text>
					<view class="input">
						<u--input v-model="from.truingNumber" placeholder="请输入精修照片张数" border="none"
							type="number"></u--input>
						<u-icon slot="right" name="arrow-right" @click="show =true" color="#a6a6a6"></u-icon>
					</view>
				</view>
				<view class="jingxiu">
					<text class="jingxiu-title">
						简修
					</text>
					<view class="input">
						<u--input v-model="from.simpleModifyNumber" placeholder="请输入简修照片张数" border="none"
							type="number"></u--input>
						<u-icon slot="right" name="arrow-right" @click="show1 =true" color="#a6a6a6"></u-icon>
					</view>
				</view>
				<view class="button">
					<button @click="getminus">取消</button>
					<button @click="getdownload">确定</button>
				</view>
			</view>
		</u-popup>
		<u-calendar :closeOnClickOverlay="true" :allowSameDay="true" :rangePrompt=" '选择天数不能超过' + list.days + '天' "
			:maxRange="list.days-1" @close="closecalendar" :show="showcalendar" :mode="mode" rowHeight="100"
			color="#f55c21" @confirm="confirm"></u-calendar>

		<view class="pace">
			<!-- <button></button> -->
			<view class="pace-price">
				<text>现价：{{list.amount ?list.amount + amount : '0'}}元</text>
				<text>原价：{{list.originalAmount ?list.originalAmount + amount : '0'}}元</text>
			</view>
			<button @click="goNextStep()">支付</button>
		</view>
	</view>
</template>

<script>
	import DateTimeRangePicker from '@/components/DateTimePicker.vue'
	export default {
		data() {
			return {
				list: {},
				pickerVisible: false,
				startDateTime: '',
				endDateTime: '',
				pathAttractionList: {},
				showcalendar: false,
				photoshow: false,
				from: {
					truingNumber: '',
					simpleModifyNumber: ''
				},
				attractionImagesList: [],
				columns: [
					['50', '100', '150', '200']
				],
				columns1: [
					['50', '100', '150', '200']
				],
				index: 0,
				show: false,
				amount: 0,
				show1: false,
				startDate: '', // 用户选择的开始日期
				endDate: '', // 根据开始日期自动计算的结束日期
			};
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中...'
			})
			this.getPackageDetail(options.id)
			setTimeout(() => {
				uni.hideLoading()
			}, 1000)
		},
		components: {
			DateTimeRangePicker
		},
		watch: {
			// 监听startDate的变化，并更新endDate
			startDate(newVal) {
				if (newVal) {
					// 假设我们总是添加两天作为结束日期
					this.endDate = this.addDays(new Date(newVal), 2);
					console.log(this.endDate);
				}
			},
		},
		methods: {
			showPicker() {
				this.pickerVisible = true
			},
			onCancel() {
				this.pickerVisible = false
			},
			open() {},
			close() {
				this.photoshow = false
				this.from.truingNumber = 0
				this.from.simpleModifyNumber = 0
			},
			confirmpicker(e) {
				this.show = false
				this.from.truingNumber = Number(e.value)
			},
			cancel() {
				this.show = false
			},
			confirmpicker1(e) {
				this.show1 = false
				this.from.simpleModifyNumber = Number(e.value)
			},
			cancel1() {
				this.show1 = false
			},
			getminus() {
				this.photoshow = false
				this.from.truingNumber = 0
				this.from.simpleModifyNumber = 0
			},
			getdownload() {
				if (this.from.truingNumber <= 10) {
					return this.$u.toast('精修照片张数不能小于10张')
				}
				if (this.from.simpleModifyNumber <= 10) {
					return this.$u.toast('简修照片张数不能小于10张')
				}
				this.photoshow = false
				this.getPhotoAmount()
			},
			// 加照片
			getaddphoto() {
				this.photoshow = true
			},
			// 选择日期
			confirm(e) {
				this.startDateTime = e[0]
				const index = e.length - 1
				this.endDateTime = e[index]
				this.showcalendar = false
				console.log(111, e);
				// this.getuserPlancountAmount()
			},
			addDays(date, days) {
				const result = new Date(date);
				result.setDate(result.getDate() + days);
				return result.toISOString().split('T')[0]; // 转换为ISO日期字符串并截取日期部分
			},
			// 获取商品详情数据
			async getPackageDetail(id) {
				let res = await this.$u.api.getPackageDetail({
					id: id
				})
				if (res.code == 200) {
					this.list = res.data
					this.pathAttractionList = res.data.workPath?.pathAttractionList.map(item => {
						// 将 images 字符串转换为数组对象
						const imagesArray = item.attractionImages.split(',').map(url => ({
							url: this.$u.fileBaseUrl + url.trim()
						}));

						return {
							...item,
							images: imagesArray
						};
					});
				}
			},
			async getPhotoAmount() {
				let res = await this.$u.api.getPhotoAmount(this.from)
				if (res.code == 200) {
					this.amount = res.data.amount
				}
			},
			// 跳转到选择页面
			goNextStep() {
				if (this.startDateTime) {
					uni.navigateTo({
						url: `/packagesIndex/pages/calculation/calculation?id=${this.list.id}&startDate=${this.startDateTime}&endDate=${this.endDateTime}&extra_truing_number=${this.from.truingNumber}&extra_simple_modify_number=${this.from.simpleModifyNumber}`
					})
				} else {
					this.$u.toast('请选择游玩时间')
				}
			},
			showPicker() {
				this.pickerVisible = true
			},
			onConfirm(dateTimeRange) {
				this.startDateTime = dateTimeRange.startDateTime || ''
				this.endDateTime = dateTimeRange.endDateTime || ''
				this.pickerVisible = false
			},
			onCancel() {
				this.pickerVisible = false
			},
			closecalendar() {
				this.showcalendar = false
			},
			bindPickerChange(e) {
				this.index = e.detail.value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fff;
		padding: 0 10rpx calc(env(safe-area-inset-bottom) + 150rpx);

		.box-introduce {
			background-color: #f1f1f1;
			padding: 0 10rpx 10rpx;
			border-radius: 10rpx;

			.box-introduce-list {
				background: linear-gradient(to bottom, rgb(241, 241, 241), #fff);
				margin: 0 10rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-around;
				box-sizing: border-box;
				border-radius: 10rpx;

				.orderintroduce {
					width: 100%;
					margin: 0 auto;
					padding: 20rpx 10rpx;
					box-sizing: border-box;
					margin: 15rpx 0;
					background-color: #fff;
					display: flex;
					align-items: center;
					border-radius: 10rpx;

					image {
						width: 50rpx;
						height: 50rpx;
					}

					.orderPathAttraction {
						font-size: 32rpx;
					}

					view {
						width: 600rpx;
						margin-left: 10rpx;
					}
				}
				
				.detail-intro-wrap {
					width:500rpx;
					padding: 20rpx 0;
				}
				
				
				
				.detail-intro-top,
				.detail-intro-bottom {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
				}
				
				.detail-intro-item {
					display: flex;
					align-items: center;
					gap: 5rpx;
					&>view{
						font-size:24rpx;
						
					}
				}
			}
		}


		.box-scenic {
			margin-top:20rpx;
			background-color: rgb(241, 241, 241);
			padding:0 20rpx 20rpx;
			border-radius: 10rpx;
			
			.top-scenic {
padding-top:20rpx;
				.scenic-title {
					margin-bottom: 20rpx;
					color:#333;
				}

				.scenic {
					height: 400rpx;

					image {
						width: 100%;
						height: 400rpx;
						margin: 20rpx 0 0;
					}
				}
			}
		}

		.time {
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			padding: 20rpx 15rpx;
			margin: 20rpx 0;
			background-color: rgb(241, 241, 241);
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			

			.time-list {
				view {
					display: flex;
					align-items: center;

					view {
						color: #242424;
						font-size: 30rpx;
					}

					.time-display {
						font-size: 30rpx;
					}
				}
			}
		}

		.addphoto {
			position: fixed;
			top: 25%;
			right: 0;
			border-radius: 10rpx 0 0 10rpx;
			text-align: center;


			image {
				position: absolute;
				top: 0;
				right: 0;
				width: 110rpx;
				height: 110rpx;
				position: relative;
			}

			view {
				position: absolute;
				width: 110rpx;
				text-align: center;
				z-index: 9999;
				color: #FFF;
				top: 15%;

				.onetext {
					display: block;
					font-size: 40rpx;
				}

				.twotext {
					display: block;
					font-size: 14rpx;
				}
			}
		}

		.u-popup {
			margin: 20rpx 44rpx;

			.jingxiu {
				display: flex;
				align-items: center;
				gap: 30rpx;
				margin: 20rpx 0;

				.jingxiu-title {
					font-size: 50rpx;
					color: #f55c21;
				}

				.input {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 10rpx 20rpx 10rpx 100rpx;
					box-sizing: border-box;
					background-color: #efefef;
					border-radius: 10rpx;
					color: #666;

					.picker {
						width: 100%;
					}

				}
			}

			.button {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 70rpx;
				margin-bottom: 40rpx;


				button {
					width: 240rpx;
					height: 70rpx;
					margin-top: 30rpx;

					&:nth-child(1) {
						background-color: #fff;
						color: $overall-color;
						border: 2rpx solid $overall-color;
						border-radius: 35rpx;
					}

					&:nth-child(2) {
						background-color: $overall-color;
						color: #fff;
						border: 2rpx solid $overall-color;
						border-radius: 35rpx;
					}
				}
			}
		}



		.pathList {
			.pathList-item {
				position: relative;

				image {
					width: 100%;
					margin: 20rpx 0;
					border-radius: 20rpx;
				}

				view {
					width: 100%;
					position: absolute;
					bottom: 20rpx;
					background-color: #fff;
					border-radius: 20rpx;
					box-shadow: 10rpx 10rpx 15rpx #EFEFEF;
					padding: 20rpx;
					box-sizing: border-box;
				}
			}
		}

		.pace {
			position: fixed;
			left:0;
			bottom: 0;
			width: 100%;
			height:calc(140rpx + env(safe-area-inset-bottom));
			padding:0 20rpx;
			padding-bottom:env(safe-area-inset-bottom);
			background-color: white;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 99;

			.pace-price {
				color: $overall-color;
				text {
					display: inline-block;
					&:nth-child(1) {
						font-size: 40rpx;
					}

					&:nth-child(2) {
						text-decoration: line-through;
						font-size: 22rpx;
						margin-left: 30rpx;
						
					}
				}
			}

			button {
				padding: 10rpx 60rpx;
				border-radius: 50rpx;
				background-color: $overall-color;
				color: #fff;
			}
		}
	}
</style>